just putting together a quick range slider and I want the "progress bar" to move based on the value of the input field changing. The main control for this will be the scroll wheel but for some reason nothing is firing when I use .on("scroll"), just trying to figure out why. It took me a while to figure out I needed the onmousewheel="" attribute present to even be able to scroll through input values.
let slideInput = $("#slider-value");
$(document).ready(function() {
slideInput.on("click", function() {
const value = slideInput.val();
console.log(value);
});
slideInput.on("scroll", function() {
const value = slideInput.val();
console.log(value);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="slider-value" onmousewheel="" step=".1" min="2" max="10" placeholder="2.0" class="slider-value">The event is wheel.
let slideInput = $("#slider-value");
$(document).ready(function() {
slideInput.on("click", function() {
const value = slideInput.val();
console.log(value);
});
slideInput.on("wheel", function() {
const value = slideInput.val();
console.log(value);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="slider-value" onmousewheel="" step=".1" min="2" max="10" placeholder="2.0" class="slider-value">